<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <SlidingPanel :Show="Show" :Width="Width" @update:Show="SlidingPanelHide" CustomClass="SlidingPanelContent">
    <div class="receive-wrap">
      <h1 style="color: #fff;font-weight:normal">添加消息接收人</h1>
      <div class="receive-title">
      	<span class="receive-title_text">未添加的消息接收人</span>
      	<span class="receive-title_text">已添加的消息接收人</span>
      </div>
      <el-transfer
	    filterable
	    :titles="titles"
	    filter-placeholder="用户名、真实姓名、手机号或角色"
	    v-model="value2"
	    :data="data2">
	    <span slot-scope="{ option }" :title="option.label">{{ option.label }}</span>
	  </el-transfer>
	    <div slot="footer" class="receive-footer">
	        <el-button type="primary" size="mini" @click="create">确定</el-button>
	        <el-button size="mini" @click="cancel" plain>取消</el-button>
	    </div>
    </div>
  </SlidingPanel>
</template>
<script>
  import SlidingPanel from '@/components/SliderPanel'
  import {
      getNoticePeople,
      updateObj,
      page
  } from "@/api/device/deviceMessageNotice/index";
	export default{
    components: {SlidingPanel},
		props:{
      Show: {required: true, default: false},
      Width: {type: Number, default: 980},
      warningType: {
        type: String,
        default: ""
      }
    },
		data(){
		return{
			titles:['用户名 / 真实姓名 / 手机号 / 角色','用户名 / 真实姓名 / 手机号 / 角色'],
			data2: [],
      value2: [],//已选中的ids
		}
		},
		methods:{
			cancel(){
				this.$emit("update:Show",false)
			},
      SlidingPanelHide (v) {
        this.$emit('update:Show', v)
      },
			create(){
			  let userid = JSON.parse(JSON.stringify(this.value2.join(',')));
        updateObj({'noticeType':this.warningType,'userIds': userid}).then(res=>{
          if (res.status===200){
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            this.$emit("sureReceive");
          }
        })
			},
      getNoticePeoplelist(noticeType){
			  //根据类型处理数据
        getNoticePeople({'noticeType':noticeType}).then(res=>{
            let peopeList = res.data;
            let dataArr = [];
            peopeList.forEach((item)=>{
               dataArr.push({
                 label: item.username+' / '+item.name+' / '+item.mobilePhone+' / '+item.groupName,
                 key:item.id
               })
            })
           this.data2 = dataArr;
        // 已选列表处理
           page({'noticeType':noticeType}).then(res=>{
              let receiveList = res.data.rows;
              let temparr = [];
             receiveList.forEach((item)=>{
               temparr.push(item.id)
             })
             this.value2 = temparr;
             //已选择列表不能在此处删除
             for (var i=0;i<this.data2.length;i++)
             {
               for (var j = 0;j<this.value2.length;j++){
                 if (this.data2[i].key===this.value2[j]){
                    this.data2[i].disabled = true
                 }
               }
             }
           })
        })
      }
		},
    watch:{
      Show:function(val){
        let self=this;
        if (val) {
          this.$nextTick(function(){
            self.getNoticePeoplelist(self.warningType)
          })
        }else {
          self.data2 = [];
          self.value2 = [];//已选中的ids
        }
      }
    }
	}
</script>
<style lang="scss">
.SlidingPanelContent .receive-wrap{
  width: 800px;
  margin: 20px auto;
}
.SlidingPanelContent {

	.el-transfer {
	    font-size: 14px;
	    display: flex;
	    justify-content: space-between;
	    width: 100%;
	    height:70vh;
	    align-items: center;
	    .el-transfer-panel{
	    	&:first-child{
	    		width:50%;
	    	}
	    	&:last-child{
	    		width:50%;
	    	}
        .el-transfer-panel__header{
          .el-checkbox__label{
            font-size: 12px;
          }
        }
        .el-transfer-panel__body{
          .el-transfer-panel__item{
            .el-checkbox__label{
              font-size: 12px;
              color:rgba(255,255,255,.7);
              font-family: PingFangSC-Medium;
            }
            .el-checkbox__input.is-checked + .el-checkbox__label{
              color: rgba(80, 227, 194, 0.7);
            }
          }
        }
	    }
	}
	.el-transfer-panel{
			height:100%;
    .el-transfer-panel__body{
      height: 90%;
    }
		.el-transfer-panel__list{
			height:90%;
		}
	}
	.receive-footer{
		text-align:left;
	}
	.receive-title{
		display:flex;
		justify-content:space-between;
		&>span:first-child{
			width:50%;
		}
		&>span:last-child{
			width:44%;
		}
    &>span.receive-title_text{
      font-size: 16px;
      color: #50E3C2;
      font-family: PingFangSC-Medium;
      padding:10px 0;
    }
	}
}
</style>
